<template id='newPassword'>
    <div class="newPassword">
        <SignCard :options="newPasswordData" @click="submit">
            <template v-slot:descs>
                <div class="descs">
                    <p class="desc">{{ newPasswordData.desc }}</p>
                </div>
            </template>
            <template v-slot:form>
                <div class="form">
                    <ZyInput :zyModel="newPasswordData.password" ref="password"></ZyInput>
                    <ZyInput :zyModel="newPasswordData.verifyPassword" ref="verifyPassword" class="zInput"></ZyInput>
                </div>
            </template>
        </SignCard>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { createNamespacedHelpers } from "vuex";
const newPassword = createNamespacedHelpers('newPassword')
export default {
    name: 'newPassword',
    components: {
    },
    props: {
        type: {
            type: String
        }
    },

    // 定义属性
    data() {
        return {

        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
        ...newPassword.mapState(['newPasswordData']),
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        showPasswordTip() {
            this.$refs.verifyPassword.showFlag()
        },
        submit() {
            let password = this.$refs.password.check('password')
            let verifyPassword = this.$refs.verifyPassword.check('password')
            if (password && verifyPassword) {
                if (this.newPasswordData.verifyPassword.value !== this.newPasswordData.password.value) {
                    this.showPasswordTip()
                } else {
                    if (this.type == 'forgot') {
                        this.forgetPassSave();
                    } else if (this.type == 'change') {
                        this.changePwdSave();
                    }
                }

            }
        },
        //修改密码保存新密码
        async changePwdSave() {
            let res = await this.$api.profile.changePwdSaveApi({
                "pwd": this.newPasswordData.password.value
            })
            if (this.$isCode(res, true)) {
                this.$emit('submit')
            } else {
                this.showPasswordTip();
            }
        },
        //忘记密码保存新密码
        async forgetPassSave() {
            let res = await this.$api.register.forgetPassSaveApi({
                "pwd": this.newPasswordData.password.value,
                "email": this.newPasswordData.realEmail
            })
            if (this.$isCode(res, true)) {
                this.$emit('submit')
            } else {
                this.showPasswordTip();
            }
        },
        //重置校验
        reset() {
            this.$refs.password.reset()
            this.$refs.verifyPassword.reset()
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.newPassword {
    .descs {
        margin-top: 26px;
        text-align: center;
        width: 270px;

        .desc {
            color: #a8a8a8;
            font-size: 18px;
            margin-top: 15px;
            line-height: 1.5;
        }

        .desc:nth-child(1) {
            margin-top: 0px;
        }

    }

    .form {
        margin-top: 30px;

        .zInput {
            margin-top: 36px;
        }
    }
}

//手机样式
@media screen and (max-width: 650px) {
    .descs {
        width: 100% !important;
    }

    .form {
        width: 100% !important;
    }
}
</style>